<template>
    <!-- 资源效率分析 -->
    <div class="zyxlcontent" v-if="value=='资源效率分析'">
        <div class="zyxl_left">
            <div class="zyxl_left_one">
                <div class="mzyxlnrbox">
                    <div style="display: flex;align-items: center;" v-for=" (item,index) in zyxlfxdata1" :key="index">
                        <div class="zyxlnrbox width320">
                            <div>{{item.name}}</div>
                            <div>{{item.number}}</div>
                            <div class="luse fontsize16">与上年同月相比</div>
                            <div class="luse">{{item.fudu}}</div>
                        </div>
                        <div class="fgxian" v-if="index!=3"></div>
                    </div>
                </div>
            </div>
            <div class="zyxl_left_two">
                <div class="mzyxlnrbox">
                    <div style="display: flex;align-items: center;" v-for=" (item,index) in zyxlfxdata2" :key="index">
                        <div class="zyxlnrbox width440">
                            <div>{{item.name}}</div>
                            <div>{{item.number}}</div>
                            <div class="luse fontsize16">与上年同月相比</div>
                            <div class="luse">{{item.fudu}}</div>
                        </div>
                        <div class="fgxian" v-if="index!=2"></div>
                    </div>
                </div>
            </div>
            <div class="zyxl_left_three">
                <div class="three_box1">
                    <div class="lablename">电能耗top</div>
                    <div style="display: flex;">
                        <div class="dnhl">
                            <div class="anxitong">
                                <div class="tabledanwei">按系统</div>
                                <el-table size="medium" :data="nxttableData" border>
                                    <el-table-column align="center" label="位置" prop="weizhi"></el-table-column>
                                    <el-table-column align="center" label="能耗" prop="data"></el-table-column>
                                </el-table>
                            </div>
                            <div class="anxitong">
                                <div class="tabledanwei">按设备</div>
                                <el-table size="medium" :data="nxttableData1" border>
                                    <el-table-column align="center" label="位置" prop="weizhi"></el-table-column>
                                    <el-table-column align="center" label="能耗" prop="data"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="dnhr">
                            <div class="anxitong">
                                <div class="tabledanwei">按区域</div>
                                <el-table size="medium" :data="nxttableData2" border>
                                    <el-table-column align="center" label="位置" prop="weizhi"></el-table-column>
                                    <el-table-column align="center" label="能耗" prop="data"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="three_box2">
                    <div class="lablename">水能耗top</div>
                    <div class="three_box2_data">
                        <div class="anxitong">
                            <div class="tabledanwei">按区域</div>
                            <el-table size="medium" :data="nxttableData3" border>
                                <el-table-column align="center" label="位置" prop="weizhi"></el-table-column>
                                <el-table-column align="center" label="能耗" prop="data"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="zyxl_right">
            <div class="zyxl_right_one">
                <div class="rrsormj">
                    <div>总人数</div>
                    <div class="luse">22,105</div>
                </div>
                <div class="fengexian"></div>
                <div class="rrsormj">
                    <div>总面积</div>
                    <div class="luse">130 万m²</div>
                </div>
            </div>
            <div class="zyxl_right_tow">
                <div class="lablename">暖通空调下班后请求小时数</div>
                <div class="ntktszt" id="ntktszt"></div>

            </div>
            <div class="zyxl_right_three">

            </div>
        </div>
    </div>
    <!-- 资源效率分析 End -->
</template>
<script>
    import * as echarts from 'echarts'
    export default {
        data() {
            return {
                zyxlfxdata1: [
                    { name: '室内环境', number: '5,322,390kWh', fudu: '-10.3%' },
                    { name: '用电成本', number: '3,193,434元', fudu: '-10.3%' },
                    { name: '人均电能耗', number: '240.8kWh', fudu: '-10.3%' },
                    { name: '电能耗强度', number: '4.1kWh/㎡', fudu: '-10.3%' },
                ],
                zyxlfxdata2: [
                    { name: '生活水能耗', number: '120,525m³', fudu: '-27.6%' },
                    { name: '中山能耗', number: '24,105m³', fudu: '24.2%' },
                    { name: '用水成本', number: '361,575元', fudu: '-25.8%' },
                ],
                nxttableData: [{
                    weizhi: '暖通空调',
                    data: "310,901kWh",
                },
                {
                    weizhi: '照明',
                    data: "162,306kWh",
                },
                {
                    weizhi: '视频监控',
                    data: "94,244kWh",
                },
                {
                    weizhi: '送排风',
                    data: "70,533kWh",
                },],
                nxttableData1: [{
                    weizhi: '压缩机组',
                    data: "88,912kWh",
                },
                {
                    weizhi: '风机',
                    data: "12,002kWh",
                },
                {
                    weizhi: '灯',
                    data: "10,466kWh",
                },
                {
                    weizhi: '摄像头',
                    data: "3,983kWh",
                },],
                nxttableData2: [
                    {
                        weizhi: '医科组团',
                        data: "250,199kWh",
                    },
                    {
                        weizhi: '北区食堂',
                        data: "187,500kWh",
                    },
                    {
                        weizhi: '理科组团',
                        data: "99,654kWh",
                    },
                    {
                        weizhi: '北区宿舍',
                        data: "30,888kWh",
                    }, {
                        weizhi: '南区宿舍',
                        data: "29,549kWh",
                    }, {
                        weizhi: '文科组团',
                        data: "23,111kWh",
                    }, {
                        weizhi: '图书馆',
                        data: "18,290kWh",
                    },
                    {
                        weizhi: '大礼堂',
                        data: "13,432kWh",
                    },],
                nxttableData3: [
                    {
                        weizhi: '北区食堂',
                        data: "12,809 m³",
                    },
                    {
                        weizhi: '南区食堂',
                        data: "12,224 m³",
                    },
                    {
                        weizhi: '北区宿舍',
                        data: "10,804 m³",
                    },
                    {
                        weizhi: '南区宿舍',
                        data: "10,476 m³",
                    }, {
                        weizhi: '医科组团',
                        data: "7,326 m³",
                    }, {
                        weizhi: '理科组团',
                        data: "5,777 m³",
                    }, {
                        weizhi: '文科组团',
                        data: "3,843 m³",
                    },
                    {
                        weizhi: '图书馆',
                        data: "731 m³",
                    },],
                zyxloption: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['医科组团', '理科组团', '活动中心', '大礼堂', '文科组团']
                    },
                    yAxis: {
                        type: 'value',
                        name: "单位：h",
                    },
                    series: [
                        {
                            data: [40, 88, 60, 39, 34],
                            type: 'bar',
                            itemStyle: {
                                color: '#71C4FF',
                                normal: {
                                    label: {
                                        show: true, //开启显示数值
                                        position: 'top', //数值在上方显示
                                        textStyle: {  //数值样式
                                            color: '#000',   //字体颜色
                                            fontSize: 16  //字体大小
                                        }
                                    }
                                }
                            }
                        }
                    ]
                },

            }
        },
        methods: {
            zyxlcharts() {
                debugger
                let myChart4 = echarts.init(document.getElementById('ntktszt'))
                myChart4.setOption(this.zyxloption);
            },
        },
        mounted() {
            setTimeout(() => {
                this.zyxlcharts();
            }, 3000);


        },

    }
</script>
<style scoped lang='scss'>
    /* ------------------------------------------头部 ------------------------------------------*/
    .gohome {
        cursor: pointer;
    }

    .homeicon img {
        position: relative;
        top: 50%;
        /* left: 50%; */
        transform: translate(0, -50%);
        margin-left: 50px;
    }

    .selectdiv {
        position: relative;
        top: 50%;
        /* left: 50%; */
        transform: translate(0, -50%);
        margin-left: 50px;
    }

    .ptname {
        font-size: 36px;
        font-weight: 900;
        color: #ffffff;
        line-height: 100px;
        /* font-style: italic; */
    }

    .header_infor>>>.el-input__inner {
        color: #fff;
        background-color: rgba(0, 0, 0, 0);
    }

    .header_infor {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto 100px;
        font-size: 16px;
        background-color: #007674;
    }

    .zs_header_content_left_item1 {
        position: relative;
        width: 630px;
        height: 100%;
        display: flex;
        /* flex-direction: row-reverse; */
    }

    .zs_header_content_left_item2 {
        position: relative;
        width: 620px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* ------------------------------------------头部 Eng------------------------------------------*/
    /* <!-------------------------------------------- 综合分析 --------------------------------------------> */


    .header {
        height: 100px !important;
    }

    .el-header {
        height: 100px;
        /* background-color: #102f53; */
        color: #fff;
        padding: 0 0px 0 0px;
        /* margin: -100px 0 0; */
        position: relative;
    }

    .main {
        padding: 30px;
        background-color: #EEEEEE;
    }

    .content {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: space-between;
    }

    .left_box {
        width: 50%;
    }

    .right_box {
        width: 50%;
    }

    .left_data_box {
        width: 875px;
        height: 120px;
        background: #ffffff;
        border-radius: 5px;
        padding: 10px 20px 10px 20px;
        display: flex;
        margin-bottom: 10px;
    }

    .img_box {
        width: 190px;
    }

    .img_box>img {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .contentname {
        font-size: 16px;
        color: #333333;
    }

    .shuju_box {
        width: 280px;
    }

    .data_jiantou {
        display: flex;
        justify-content: space-evenly;
        height: 95px;
        align-items: center;
    }

    .baifenbi {
        font-size: 24px;
        color: #000000;
        margin-bottom: 10px;
    }

    .dataunit {
        font-size: 16px;
        color: #333333;
    }

    .jixian {
        width: 220px;
        text-align: center;
    }

    .jixianname {
        font-size: 16px;
        color: #333333;
    }

    .bijiaosj {
        font-size: 16px;
        color: #007674;
        width: 185px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .yuji {
        margin-bottom: 10px;
    }

    .right_content_box {
        width: 100%;
        height: 100%;
        background: #FFFFFF;
    }

    .icon_data {
        width: 50%;
        height: 227px;
        display: flex;
    }

    .rimg_box {
        margin-top: 66px;
        margin-left: 78px;
    }

    .rshuju {
        width: 260px;
        text-align: center;
        /* line-height: 227px; */
    }

    .rshuju div {
        /* line-height: 227px; */
    }

    .one_font {
        margin-top: 50px;
        font-size: 26px;
        color: #000000;
    }

    .tow_font {
        /* margin-top: 57px; */
        font-size: 26px;
        color: #000000;
    }

    .font_box {
        margin-bottom: 7px;
    }

    .three_font {
        font-size: 16px;
        color: #000000;
    }

    .four_font {
        font-size: 18px;
        color: #000000;
    }

    .content_top {
        display: flex;
        flex-wrap: wrap;
    }

    .line {
        width: 738px;
        height: 2px;
        background: #E9E9E9;
        margin-left: 89px;
        margin-top: 20px;
    }

    .content_bottom {
        height: 415px;
        width: 100%;
        background: #FFFFFF;
        display: flex;
    }

    .co2img {
        margin: 50px 0 0 78px;
    }

    .font24 {
        font-size: 24px;
        color: #000;
        margin-bottom: 10px;
        text-align: center;
    }

    .font24_box {
        width: 575px;
        /* text-align: center; */
    }

    .fontone24 {
        margin-top: 40px;

    }

    .yuan {
        width: 33px;
        height: 33px;
        color: #fff;
        border-radius: 50%;
        background: #269F9C;
        margin-left: 80px;
        text-align: center;
    }

    .yuan_line {
        display: flex;
        margin-top: 30px;
    }

    /* <!-- ------------------------------------------综合分析 end--------------------------------------------> */

    /* ------------------------------------------服务质量分析------------------------------------------ */
    .fwzlcontent {
        /* display: flex; */
        width: 100%;
        height: 100%;
    }

    .fwzlcontent_top {
        display: flex;
        width: 100%;
    }

    .fwzlcontent_bottom {
        display: flex;
        width: 100%;
        height: 571px;
        margin-top: 20px;
    }

    .snhj {
        width: 650px;
        height: 339px;
        background: #fff;
        border-radius: 5px;
        margin-right: 20px;
    }

    .lablename {
        font-size: 24px;
        margin: 10px 0 0 20px;
        color: #000;
    }

    .tcccontent {
        display: flex;
        justify-content: space-evenly;
    }

    .lyorsy {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 289px;
        font-size: 24px;
        justify-content: center;
    }


    .lyorsy div {
        margin-bottom: 10px;
    }

    .snhjcontent {
        display: flex;
    }

    .snhjcontentl {
        width: 300px;
        height: 298px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .snhjcontentr {
        width: 100%;
        height: 298px;
    }

    .dtddsjzxt {
        width: 100%;
        height: 298px;
    }

    .pjzcyxsj {
        width: 100%;
        height: 530px;
    }

    .snhjdatas {
        font-size: 18px;
        display: flex;
        align-items: center;
    }

    .imgdiv {
        margin-left: 20px;
        width: 40px;
        text-align: center;
    }

    .snhjdatas span {
        margin-left: 20px;
    }

    .dtddsj {
        width: 650px;
        height: 339px;
        background: #fff;
        border-radius: 5px;
        margin-right: 20px;
    }

    .tingchechang {
        width: 520px;
        height: 339px;
        background: #fff;
        border-radius: 5px;
        /* margin-right: 20px; */
    }

    .znzm {
        width: 650px;
        height: 571px;
        background: #fff;
        border-radius: 5px;
        margin-right: 20px;
    }

    .pjzc {
        width: 1190px;
        height: 571px;
        background: #fff;
        border-radius: 5px;
    }

    .ntktszt {
        width: 520px;
        height: 304px;
    }

    .table {
        padding: 20px;
        font-size: 16px;
        width: 610px;
        height: 490px;
    }

    .tabledanwei {
        font-size: 16px;
        margin-bottom: 10px;
    }

    /* --------------------------------服务质量分析 End------------------------------------------ */
    /* --------------------------------资源效率分析 ------------------------------------------ */
    .zyxlcontent {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .zyxl_left_one,
    .zyxl_left_two {
        width: 1320px;
        height: 160px;
        background: #fff;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .mzyxlnrbox {
        display: flex;
        justify-content: space-around;
    }

    .zyxlnrbox {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 160px;
        justify-content: space-evenly;
        font-size: 22px;

    }

    .width320 {
        width: 320px;
    }

    .width440 {
        width: 440px;
    }

    .fgxian {
        width: 2px;
        height: 74px;
        border-radius: 1px;
        background: #DDDDDD;
    }

    .luse {
        color: #007674;
    }

    .fontsize16 {
        font-size: 16px;
    }

    .zyxl_left_three {
        display: flex;
    }

    .three_box1 {
        width: 830px;
        height: 571px;
        background: #fff;
        border-radius: 5px;
        margin-right: 20px;
    }

    .dnhl {
        width: 310px;
        margin-left: 30px;
        height: 525px;
    }

    .dnhr {
        width: 380px;
        margin-left: 80px;
        height: 525px;
    }

    .anxitong {
        margin-top: 8px;
    }

    .three_box2 {
        width: 470px;
        height: 571px;
        background: #fff;
        border-radius: 5px;
    }

    .three_box2_data {
        padding: 0 20px;
    }

    .zyxl_right {
        margin-left: 20px;
    }

    .zyxl_right_one {
        width: 520px;
        height: 200px;
        background: #fff;
        border-radius: 5px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        font-size: 24px;
    }

    .fengexian {
        width: 2px;
        height: 104px;
        background: #DDDDDD;
    }

    .rrsormj {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: 90px;
    }

    .zyxl_right_tow {
        width: 520px;
        height: 345px;
        background: #fff;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .zyxl_right_three {
        width: 520px;
        height: 345px;
        background: #fff;
        border-radius: 5px;
    }

    /* --------------------------------资源效率分析 End------------------------------------------ */
    /* --------------------------------智能运营分析 ------------------------------------------ */
    .znyycontent {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .znyy_left {
        display: flex;
        width: 1410px;
        flex-wrap: wrap;
    }

    .rfh_box,
    .lfjz_box,
    .lfh_box,
    .xfl_box {
        width: 685px;
        height: 455px;
        background: #fff;
        border-radius: 5px;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .znyy_right {
        width: 450px;
        height: 930px;
        background: #fff;
        border-radius: 5px;
    }

    /* --------------------------------智能运营分析 End------------------------------------------ */

    /* 滚动条 */
    ::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 0px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
    }

    ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
        background: #78b4b4;
    }

    ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
        border-radius: 10px;
        background: #ededed;
    }

    /* 滚动条 end */
</style>